<template>
  <!-- 实时问答详情 -->
  <div class="box">
    <headerbg/>
    <div class="Breadcrumb max_width">
      <span @click="Back_Home()">首页</span>
      <span class="fh_gt">&gt;</span>
      <span @click="Back()">实时问答</span>
      <span class="fh_gt">&gt;</span>
      <span>详情</span>
    </div>
    <div class="content max_width">
      <div class="cont_div">
        <div class="pro_title">
          <p class="title">{{List_top.title}}</p>
          <div class="img_box">
            <img :src="List_top.image">
          </div>
        </div>
        <div class="pro_title2">
          <p>{{List_top.content}}</p>
        </div>
        <div class="dialogue_div">
          <!-- 状态 -->
          <div class="status max_width_pro">
            <div>
              <div class="img_box">
                <img src="../assets/problem/dianzan1.png">
              </div>
              {{List_top.zan_num}}
            </div>
             <div>
               <div class="img_box">
              <img src="../assets/problem/yanjing.png">
               </div>
              {{List_top.cang_num}}
            </div>
             <div>
               <div class="img_box">
              <img src="../assets/problem/xiaoxi.png">
               </div>
              {{List_top.comment_num}}
            </div>
          </div>
          <!-- 发表评论 -->
          <div class="comment_div max_width_pro">
            <input v-model="selfComment_text" name="comment" placeholder="写出自己的想法..." type="text"/>
            <div @click="selfComment()">发表</div>
          </div>
          <!-- 评论列表 -->
          <div class="Other_replies max_width_pro">
            <div v-for="(item, index) in List_comment" :key="index" class="original">
              <!-- 评论 -->
              <div class="text_box">
                <div class="img_box">
                  <img :src="item.benren.image" alt="头像"/>
                </div>
                <!-- 昵称和评论消息 -->
                <div class="comment_name_box">
                  <div class="comment_name_box_box">
                    <span class="text_box_name">{{ item.benren.account }}</span>
                    &#58;
                    <span class="text_box_text">{{
                        item.comment
                      }}</span>
                  </div>
                  <!-- 评论时间 -->
                  <div class="time_box">{{ item.created_at }}</div>
                </div>
                <!-- 回复按钮 -->
                <div class="reply" @click="Repl_Change(item.id)">回复</div>
              </div>
              <!-- 多行文本 -->
              <div :class="{ 'add_text_show': item.id == num }" class="text_area_box">
                <div class="max_width_pro text_area">
                  <textarea v-model="desc" :placeholder="'回复 ' + name" class="rowClass" maxlength="1000" οnchange="this.value=this.value.substring(0, 200)" οnkeydοwn="this.value=this.value.substring(0, 1000)" οnkeyup="this.value=this.value.substring(0, 1000)" @input="descInput"></textarea>
                  <div @click="publish_Change()">发表</div>
                </div>
                <!-- 回复字数提示 -->
                <div class="Font_counter">
                  还可以输入{{ remnants }}字
                </div>
              </div>
              <!-- 其他人评论他 -->
              <div class="Other_comments">
                <!-- 其他回复 -->
                <div class="other_List">
                  <!-- 评论 -->
                  <!-- 循环体 -->
                  <div v-for="(item,index) in item.childrenList" :key="index" class="other_List_div">
                    <div class="text_box_other2">
                      <!-- 评论 -->
                      <div class="img_box">
                        <img :src="item.benren.image" alt="头像"/>
                      </div>
                      <!-- {{ item.benren.account }} -->
                      <span class="text_box_name">{{ item.benren.account }}</span>
                      &#58;
                      <!-- @ -->
                      <!--  @{{ item.huifuren.account }}-->
                      <span class="at_sapn">@{{ item.huifuren.account }}</span>
                      <span class="text_box_text">{{item.comment}}</span>
                      <!-- 展开按钮 -->
                      <div class="open" @click="Open_Change()" style="display:none">
                          <div>
                            <span v-show="open_show">展开</span>
                            <span v-show="!open_show">收起</span>
                          </div>

                        <div class="open_img_box">
                          <img src="../assets/problem/arrow.png">
                        </div>
                      </div>
                      <!-- 展开按钮 -->
                      <!-- 回复 -->
                      <div class="reply" @click="Repl_Change_next(item.id)">
                        回复
                      </div>
                      <!-- 时间 -->
                      <div class="time_box">
                        {{ item.created }}
                      </div>
                    </div>
                    <!-- 多行文本 -->
                    <div :class="{ 'add_text_show2': item.id == num2}" class="text_area_box2">
                      <div class="max_width_pro text_area2">
                        <textarea v-model="desc" :placeholder="'回复 ' + name" class="rowClass2" maxlength="1000" οnchange="this.value=this.value.substring(0, 200)" οnkeydοwn="this.value=this.value.substring(0, 1000)" οnkeyup="this.value=this.value.substring(0, 1000)" @input="descInput"></textarea>
                        <div @click="publish_Change2()">
                          发表
                        </div>
                      </div>
                      <!-- 回复字数提示 -->
                      <div class="Font_counter2" >
                        还可以输入{{ remnants }}字
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {pdetails,wenzhangxq} from '@/api'
export default {
    data() {
        return {
          //
          name:'',
          // 点赞等数量和内容
            List_top:'',
            // 自己的评论内容
            selfComment_text:'',
            List_comment:[],
            // 多行文本字数显示
            remnant: 1000,
            remnants: 1000,
            // 实例中定义desc
            desc: null,
            // 控制多行文本显示
            num: null,
            num2:null,
            // id
            id:'',
            //展开
            open_show:null,
            //
            open_num:null
        };
    },
  methods: {
    // 返回首页
    Back_Home(){
      this.$router.push('/')
    },
    // 返回列表页
    Back(){
      this.$router.go(-1)
    },
    // 检测多行文本的字数
    descInput() {
      var txtVal = this.desc.length
      this.remnants = this.remnant - txtVal
    },
    // 发表自己的评论
    selfComment() {
      console.log(this.selfComment_text)
    },
    // 回复按钮(控制多文本显示)
    Repl_Change(id) {
      this.num = id
    },
    // 发表
    publish_Change() {
      this.num = null
      this.num2 = null
    },
    publish_Change2(id) {
      this.num2 = id
    },
    // 2级回复发表
    Repl_Change_next(index) {
      this.num2 = index
      this.name = this.List2[index].name
    },
    // 获取数据(问答详情)
    async ListNow(){
      await pdetails(this.id).then((response)=>{
        this.List_comment = response.data.comment
        this.List_top = response.data.data;
        // console.log(response)
      })
    },
    // 获取数据(代码知识)
    async wenzhangxq(){
      await wenzhangxq(this.id).then((response)=>{
        this.List_comment = response.data.comment
        this.List_top = response.data.data;
        // console.log(response)
      })
    },
     // 获取数据(技术知识)
    async wenzhangxq(){
      await wenzhangxq(this.id).then((response)=>{
        this.List_comment = response.data.comment
        this.List_top = response.data.data;
        // console.log(response)
      })
    },
    // 展开查看详情
    Open_Change(){

    }
  },
  created(){
    // 获取id，列表的下标是从0开始
    this.id =this.$route.query.id;
    console.log(this.id)
    this.ListNow();
  }
}
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  .Breadcrumb {
    margin: 0 auto;
    padding: 23px 0;
    font-size: 18px;
    color: #999999;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .fh_gt {
      padding: 0 10px;
      cursor: auto;
    }

    span {
      cursor: pointer;
    }

    span:hover {
      color: #ed9b5d;
    }
  }

  // content
  .content {
    margin: 18px auto;
    display: flex;
    height: auto;
    .cont_div {
      width: 864px;
      box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      margin: 0 auto;
      // 问题标题
      .pro_title {
        width: 100%;
        background: #ffffff;
        box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        .title{font-weight: bold;color:#333333;line-height: 48px;font-size: 21px;width: 95%;margin:0 auto;}
        .img_box{width:95%;margin:20px auto; padding-bottom:20px;
        img{
          width: 100%;display: block;}
        }
      }

      .pro_title2 {
        width: 100%;
        margin-top: 10px;
        margin-bottom:20px;
        height: 500px;
        background: #ffffff;
        box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        p{width: 95%;margin:0 auto;font-size: 21px;line-height: 48px;}
      }
      .dialogue_div {
        overflow: hidden;
        background: #ffffff;
        box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        margin-top: 10px;
        .max_width_pro {
          width: 800px;
          margin: 0 auto;
        }
        // 点赞评论收藏
        .status {
          background: #33cfff;
          display: flex;
          align-items: center;
          line-height: 62px;
          margin-top: 20px;
          div {
            color: #fff;
            display: flex;
            align-items: center;
            font-size: 16px;
            margin-left: 40px;
            cursor: pointer;
            .img_box{
                width: 25px;
                height: 25px;
                margin-right: 10px;
              img {
                width: 100%;
              }
            }
          }
        }
        // 发表评论
        .comment_div {
          display: flex;
          justify-content: space-between;
          margin-top: 38px;
          input {
            width: 623px;
            line-height: 62px;
            background: #f0f0f0;
            font-size: 19px;
            text-indent: 45px;
            outline: none;
            border: none;
          }

          div {
            width: 107px;
            line-height: 42px;
            background: #33cfff;
            border-radius: 20px;
            font-size: 20px;
            color: white;
            color: #ffffff;
            text-align: center;
            align-self: center;
            cursor: pointer;
          }
        }
        //
        .Other_replies {
          margin-top: 38px;
          margin-bottom: 50px;
          display: flex;
          flex-direction: column;

          .original {
            margin-top: 20px;

            .text_box {
              padding-top: 10px;
              border-top: 2px #F0F0F0 solid;
              display: flex;

              .img_box {
                width: 55px;
                height: 55px;
                border-radius: 50%;
                margin-right: 20px;
                border: 1px #f0f0f0 solid;
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                  width: 100%;
                  display: block;
                }
              }

              .comment_name_box {
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .comment_name_box_box {
                  display: flex;

                  .text_box_name {
                    width: 100px;
                    text-align: left;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: center;
                    font-weight: bold;
                    display: block;
                  }

                  .text_box_text {
                    display: block;
                    width: 280px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    padding-left: 10px;
                  }
                }

                .time_box {
                  color: #999999;
                  font-size: 14px;
                  width: 120px;
                }
              }

              .reply {
                color: #33cfff;
                font-size: 18px;
                margin-left: 43px;
                align-self: center;
                cursor: pointer;
              }
            }

            // 多行文本样式
            .text_area {
              display: flex;
              justify-content: space-between;
              margin-top: 20px;

              div {
                width: 107px;
                line-height: 42px;
                background: #33cfff;
                border-radius: 20px;
                font-size: 20px;
                color: white;
                color: #ffffff;
                text-align: center;
                align-self: center;
                cursor: pointer;
              }
            }

            // 多行文本
            .text_area_box {
              height: 0px;
              overflow: hidden;
              margin-top: 15px;
            }

            // 隐藏盒子并且显示动画滑动效果
            .add_text_show {
              height: 200px;
              transition: height 0.3s;
            }

            .rowClass {
              width: 623px;
              height: 96px;
              background: #f0f0f0;
              font-size: 19px;
              text-indent: 45px;
              outline: none;
              resize: none; /*设置多行文本框，不能拓展大小*/
              padding: 10px 0;
            }

            // 字体计数
            .Font_counter {
              width: 623px;
              padding: 27px 0;
              text-align: right;
              color: #999;
              font-size: 16px;
            }
          }

          .original:last-child {
            border-bottom: 2px gray solid;
          }

          // 其他评论
          .Other_comments {
            .other_List {
              width: 750px;
              margin-left: 50px;
              border-left: 2px #E5E5E5 solid;
              //
              .other_List_div {
                display: flex;
                flex-direction: column;
                margin-left: 20px;
                border-bottom: 1px #F0F0F0 solid;
                padding-top: 10px;

                .text_box_other2 {
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  position: relative;
                  .img_box {
                    width: 55px;
                    height: 55px;
                    border-radius: 50%;
                    margin-right: 20px;
                    border: 1px #f0f0f0 solid;
                    overflow: hidden;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  }

                  img {
                    width: 100%;
                    display: block;
                  }

                  .text_box_name {
                    width: 100px;
                    text-align: left;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: center;
                    font-weight: bold;
                  }
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                  .text_box_text {
                    // border:1px red solid;
                    width: 280px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    padding-left: 10px;
                  }
                  .open_text_class{
                    color: red;
                    white-space:normal;
                  }
                  // 展开按钮
                  .open{color: #33cfff;font-size: 14px;margin-left:20px;cursor: pointer;
                    display: flex;justify-content:center;
                    align-items: center;width:60px;
                    .open_img_box{
                      transform: rotate(-90deg);
                      transition: all 0.3s;
                      width: 22px;height: 22px;

                      .img{
                        width: 90%;
                      }
                    }
                    .add_open{
                      transform: rotate(0deg);
                    }
                  }
                  // @
                  .at_sapn {
                    color: #33cfff;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    padding-left: 10px;
                    cursor: pointer;
                    width:100px;
                    text-align: left;
                  }

                  .reply {
                    color: #33cfff;
                    font-size: 18px;
                    margin-left: 80px;
                    align-self: center;
                    cursor: pointer;
                  }

                  //
                  .time_box {
                    color: #999999;
                    font-size: 14px;
                    width: 120px;
                    position: absolute;
                    bottom: -10px;
                    right: 95px;
                  }
                }

                // 多行文本样式
                .text_area {
                  display: flex;
                  justify-content: space-between;
                  margin-top: 20px;

                  div {
                    width: 107px;
                    line-height: 42px;
                    background: #33cfff;
                    border-radius: 20px;
                    font-size: 20px;
                    color: white;
                    color: #ffffff;
                    text-align: center;
                    align-self: center;
                    cursor: pointer;
                  }
                }

                // 多行文本
                .text_area2 {
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  margin-top: 20px;

                  div {
                    width: 107px;
                    line-height: 42px;
                    background: #33cfff;
                    border-radius: 20px;
                    font-size: 20px;
                    color: white;
                    color: #ffffff;
                    text-align: center;
                    align-self: center;
                    cursor: pointer;
                  }
                }

                .text_area_box2 {
                  height: 0px;
                  overflow: hidden;
                  margin-top: 15px;
                }

                // 隐藏盒子并且显示动画滑动效果
                .add_text_show2 {
                  height: 200px;
                  transition: height 0.3s;
                }

                .rowClass2 {
                  width: 550px;
                  height: 96px;
                  background: #f0f0f0;
                  font-size: 19px;
                  text-indent: 45px;
                  outline: none;
                  resize: none; /*设置多行文本框，不能拓展大小*/
                  padding: 10px 0;
                }

                // 字体计数
                .Font_counter2 {
                  width: 623px;
                  padding: 27px 0;
                  text-align: right;
                  color: #999;
                  font-size: 16px;
                }
              }
            }
          }

          .add_other {
            height: 300px;
            transition: height 0.5s;
            border-top: 1px gray solid;
          }
        }
      }
    }
  }
}
</style>
